<template>
  <div style="width:100%;height:100%;position: relative;">
    <!-- <h2 style="color:#fff">眼图</h2> -->
    <canvas id="eyeChart" style="width:100%;height:100%"></canvas>
    <div
      style="position: absolute;top: 5px;left: 50%; transform: translateX(-50%); color: #dbffff;font-size: 16px;"
    >
      眼图
    </div>
  </div>
</template>

<script>
import chart from "@/assets/js/myCharts.js";
export default {
  // 眼图
  name: "EyeChart",
  data() {
    return {
      eyeChart: null,
    };
  },
  mounted() {
    this.initChart();
    setInterval(() => {
      let temArr = [];
      for (let i = 0; i < 256; i++) {
        temArr.push(i, (Math.random() * 20 - 10).toFixed(2) * 1);
      }
      this.drawChart(temArr);
    }, 1000);
  },
  methods: {
    // 初始化眼图
    initChart() {
      this.eyeChart = chart();
      this.eyeChart.chartEyes({
        container: "eyeChart",
        xAxisInterval: [0, 256],
        yAxisInterval: [-10, 10],
        line_color: {
          r: 0.3,
          g: 0.4,
          b: 0.9,
        },
      });
    },
    // 绘制眼图
    drawChart(eyeData) {
      // console.log("眼图数据", eyeData);
      let temArr = [];

      this.eyeChart.clear();
      /** 添加多条线
       * 参数一： 所有线上面点的坐标数组
       * 参数二： 每条线含有的点的数量
       */
      this.eyeChart.drawLines(eyeData, eyeData.length / 2);
    },
  },
};
</script>

<style lang="less" scoped></style>
